<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的门店</title>
    <script src="../js/mui.min.js"></script>
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/style.css" />
	<link rel="stylesheet" href="../css/iconfont.css" />
	<link rel="stylesheet" href="../css/wallet.css" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">我的门店</h1>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon iconfont icon-shoukuanjilu"></span>
			<span class="mui-tab-label">收款记录</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon iconfont icon-dianpujieshao01"></span>
			<span class="mui-tab-label">门店管理</span>
		</a>
	</nav>
	<div class="mui-content">
		<div id="dd" class="mendxl_box" tabindex="1">
			<div class="name">所有门店</div> 
			<div class="name_con">
				<p class="active"><a href="#">所有门店</a></p>
				<p><a href="#">连锁店1</a></p>
				<p><a href="#">连锁店2</a></p>
			</div>
		</div>
		<div class="mendsk_box">
			<div class="mendsk_item">
				<div class="mdsk_timebox clearfix">
					<div class="mdsk_time">2017年07月18日</div>
					<div class="mdsk_lispri">收入：<em>¥120</em></div>
				</div>
				<ul class="mdsk_list">
					<li>
						<a href="#" class="clearfix">
							<div class="mdsk_memimg"><img src="../images/toux.jpg"></div>
							<div class="mdsk_info">
								<p class="mdsk_memnam">Acher**</p>
								<p class="mdsk_adress">郴州锦绣东路</p>
								<p class="mdsk_fktime">
									<span>07-18 13:40</span>
									<span>丨</span>
									<span>第1次消费</span>
								</p>
							</div>
							<div class="mdsk_dbpri">¥12</div>
						</a>
					</li>
					<li>
						<a href="#" class="clearfix">
							<div class="mdsk_memimg"><img src="../images/toux.jpg"></div>
							<div class="mdsk_info">
								<p class="mdsk_memnam">Acher**</p>
								<p class="mdsk_adress">郴州锦绣东路</p>
								<p class="mdsk_fktime">
									<span>07-18 13:40</span>
									<span>丨</span>
									<span>第1次消费</span>
								</p>
							</div>
							<div class="mdsk_dbpri">¥12</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mendsk_item">
				<div class="mdsk_timebox clearfix">
					<div class="mdsk_time">2017年07月18日</div>
					<div class="mdsk_lispri">收入：<em>¥120</em></div>
				</div>
				<ul class="mdsk_list">
					<li>
						<a href="#" class="clearfix">
							<div class="mdsk_memimg"><img src="../images/toux.jpg"></div>
							<div class="mdsk_info">
								<p class="mdsk_memnam">Acher**</p>
								<p class="mdsk_adress">郴州锦绣东路</p>
								<p class="mdsk_fktime">
									<span>07-18 13:40</span>
									<span>丨</span>
									<span>第1次消费</span>
								</p>
							</div>
							<div class="mdsk_dbpri">¥12</div>
						</a>
					</li>
					<li>
						<a href="#" class="clearfix">
							<div class="mdsk_memimg"><img src="../images/toux.jpg"></div>
							<div class="mdsk_info">
								<p class="mdsk_memnam">Acher**</p>
								<p class="mdsk_adress">郴州锦绣东路</p>
								<p class="mdsk_fktime">
									<span>07-18 13:40</span>
									<span>丨</span>
									<span>第1次消费</span>
								</p>
							</div>
							<div class="mdsk_dbpri">¥12</div>
						</a>
					</li>
				</ul>
			</div>
			
		</div>
				  
	</div>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		
		function DropDown(el) {
			this.dd = el;
			this.aa = el;
			this.placeholder = this.dd.children('.name');
			this.placeholder = this.aa.children('.name');
			this.opts = this.dd.find('div.name_con > p');
			this.opts = this.aa.find('div.name_con > p');
			this.val = '';
			this.index = -1;
			this.initEvents();
		}
		DropDown.prototype = {
			initEvents : function() {
				var obj = this;

				obj.dd.on('click', function(event){
					$(this).toggleClass('active');
					return false;
				});

				obj.opts.on('click',function(){
					var opt = $(this);
					obj.val = opt.text();
					obj.index = opt.index();
					obj.placeholder.text(obj.val);
				});
			},
			getValue : function() {
				return this.val;
			},
			getIndex : function() {
				return this.index;
			}
		}

		$(function() {

			var dd = new DropDown( $('#dd') );
			var aa = new DropDown( $('#aa') );

			$(document).click(function() {
				// all dropdowns
				$('.mendxl_box').removeClass('active');
			});

		});
		
		$('.name_con > p').bind('click', function(){
		    $(this).addClass('active').siblings().removeClass('active');
		});

	</script>
</body>
</html>
